<template>
  <uni-popup
    class="custom-popup__wrapper"
    ref="popup"
    type="bottom"
    border-radius="20px 20px 0 0"
    @change="({ show }) => $emit('input', show)"
  >
    <view class="popup-container">
      <view class="popup-header">{{ title }}</view>
      <view class="popup-content">
        <slot></slot>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "请选择",
    },
  },
  data() {
    return {};
  },
  watch: {
    value(val) {
      if (val) {
        this.$refs.popup.open();
      } else {
        this.$refs.popup.close();
        this.$emit("input", false);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-popup__wrapper::v-deep .popup-container {
  height: 400px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .popup-header {
    padding: 16px;
    box-sizing: border-box;
  }
  .popup-content {
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden auto;
  }
}
</style>
